CSS基礎學習筆記

1. CSS基本概念
   CSS（Cascading Style Sheets）：用於設計網頁的外觀和佈局。它使我們能夠將樣式與HTML結構分離，從而使網站設計更具可維護性和一致性。
   語法：CSS規則由選擇器和聲明塊組成。聲明塊由屬性和值組成。

2. CSS選擇器
   基本選擇器：
   元素選擇器：選擇HTML標籤，例如p {}。
   類選擇器：選擇特定的類，使用.開頭，例如.classname {}。
   ID選擇器：選擇特定ID，使用#開頭，例如#idname {}。
   組合選擇器：
   後代選擇器：選擇某個元素內的特定後代，例如div p {}（選擇所有位於內的）。
   兄弟選擇器：選擇緊接著的兄弟元素，例如h1 + p {}。
   伺服器偽類：
   :hover：當鼠標懸停在元素上時應用的樣式。
   :focus：當元素獲得焦點時應用的樣式。

3.CSS屬性
文字屬性：
color：設置文字顏色。
font-size：設置文字大小。
font-family：設置文字字體。
text-align：設置文字對齊方式（如left, right, center等）。
line-height：設置行間距。
背景屬性：
background-color：設置背景顏色。
background-image：設置背景圖片。
邊框屬性：
border：設置邊框，如border: 1px solid black;。
border-radius：設置邊框圓角。
間距屬性：
margin：設置元素的外邊距。
padding：設置元素的內邊距。

4. 盒模型（Box Model）
   CSS中的每個元素都被看作是一個矩形框，這個框由四個部分組成：
   內容（Content）：實際的內容，如文本或圖片。
   內邊距（Padding）：內容與邊框之間的距離。
   邊框（Border）：包圍內容和內邊距的邊框。
   外邊距（Margin）：元素與其他元素之間的距離。
   盒模型的影響：box-sizing屬性可以改變盒模型的計算方式：
   box-sizing: content-box;（默認）：width和height僅計算內容區域，不包括內邊距和邊框。
   box-sizing: border-box;：width和height包括內邊距和邊框。

5. 佈局模式
   浮動（float）：
   float屬性用來讓元素浮動在容器內部，常用於圖片和文本的混合佈局。
   例：float: left;。
   彈性佈局（Flexbox）：
   Flexbox是一種強大的佈局模式，用於簡單地創建響應式佈局。
   常用屬性：
   display: flex;：將父容器設置為彈性容器。
   justify-content：控制子元素沿主軸的對齊方式（如center, space-between, flex-end`等）。
   align-items：控制子元素沿交叉軸的對齊方式（如center, flex-start等）。
   網格佈局（Grid）：
   CSS Grid是一個功能強大的佈局系統，允許創建二維的網格佈局。
   常用屬性：
   display: grid;：啟用網格佈局。
   grid-template-columns：定義列數和每列的寬度。
   grid-template-rows：定義行數和每行的高度。

6. 顏色與單位
   顏色表示法：
   使用顏色名稱（如red、blue等）。
   使用十六進制值（如#ff0000表示紅色）。
   使用rgb()或rgba()（可設置透明度）。
   單位：
   px（像素）：絕對單位，常用於設置精確的大小。
   %（百分比）：相對單位，通常相對於父元素。
   em和 rem：相對於當前或根元素的字體大小。

7. 引入外部CSS
   使用< link>標籤將外部CSS文件引入

8. 內部和行內樣式
   內部樣式表：在HTML文件的< head>部分使用< style>標籤定義樣式。
   行內樣式：直接在HTML標籤中使用style屬性定義樣式。